<template>
  <a-modal
    :title="$t('按条件添加')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :okText="$t('保存')"
    @cancel="handleCancel"
    :cancelText="$t('关闭')"
    v-drag
  >
    <a-spin :spinning="confirmLoading">
      <a-form class="batchForm" :model="dataForm" >
        <a-form-item style="margin-bottom: 10px;" :label="$t('商品分类')" :labelCol="{ span: 1 }" :wrapperCol="{ span: 20 }">
            <a-tree-select
                allowClear
                v-model="dataForm.goodsId"
                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                :search-placeholder="$t('请选择')"
              />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'AddKindModal',
  data() {
    return {
      width: 600,
      visible: false,
      model: {},
      confirmLoading: false,
      dataForm:{
        goodsId:'',
      },
      treeData:[],
      allChildKind:[],
    }
  },
  methods: {
    edit(datas) {
      this.visible = true
      this.dataForm.goodsId=''
      this.select()
    },
    select() {
      let that = this
      let param = {}
      param.pageNo = 1
      param.pageSize = 9999
      param.column = 'sort'
      param.order = 'asc'
      getAction('/goods/bisGoodsKind/rootList',param).then(res => {
          if (res.success) {
            console.log(res)
            that.allChildKind = []
            if (res.result.records.length > 0) {
              res.result.records.forEach(col => {
                col.key = '' + col.id
                col.value = '' + col.id
                col.title = '' + col.name
                col.id = '' + col.id
                col.pid = '' + col.pid
                col.hasChild = '' + col.hasChild
                if (col.hasChild != '0') {
                  that.getHasChild(col)
                }
              })
              that.treeData = that.getDataByResult(res.result.records)
            } else {
              that.treeData = []
            }
          } else {
            that.$alert(res.message, this.$t('提示'), {
              confirmButtonText: this.$t('确定'),
              callback: action => {}
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getHasChild(record) {
      let that = this
      let query = {}
      query.pageNo = 1
      query.pageSize = 9999
      query.form= '1,7'
      query.pid= record.id
      getAction('/goods/bisGoodsKind/rootList', query)
        .then(res => {
          if (res.success) {
            if (res.result.records.length > 0) {
              res.result.records.forEach(col => {
                col.key = '' + col.id
                col.value = '' + col.id
                col.title = '' + col.name
                col.pid = '' + col.pid
                col.id = '' + col.id
                col.hasChild = '' + col.hasChild
                if (col.hasChild != '0') {
                  that.getHasChild(col)
                }
              })
              record.children = that.getDataByResult(res.result.records)
              that.treeData = [...that.treeData]
            }
          } else {
            that.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getDataByResult(result) {
      let that = this
      return result.map(item => {
        if (item.hasChild == 0 && item.key != '0') {
          that.allChildKind.push(item.key)
        }
        return item
      })
    },
    handleOk() {
      this.$emit('ok',this.dataForm.goodsId)
      this.close()
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    }
  }
}
</script>
<style>
  .batchForm .ant-form-item-label{
    width: 30%;
  }
  .batchForm .ant-form-item-control-wrapper{
    width: 62.5%;
  }
</style>